<template>
<div class="content">
   <div class="headImg">
        <van-image
            round
            width="70px"
            height="70px"
            :src="userInfo.avatar"
        />
    </div>
    <p class="myPhone" style="text-align:center;">{{userInfo.username}}</p>
    <div class="myCollect">
        <p class="collectNum">{{shoucang.length}}</p>
        <p class="collectText" @click="handleShou">我的收藏</p>
    </div>
    <div class="myCollect">
        <p class="collectNum">0</p>
        <p class="collectText" @click="handleStore">关注的店铺</p>
    </div>
    <div class="greenBox">
        <ul class="greenTab" v-for="(item) in greenTab" :key="item.value" @click="handleOrder(item.value)">
            <li>
                 <van-icon :name="item.name" size="28px" color="#00D2C3"/>
            </li>
            <li class="tabText">{{item.text}}</li>
        </ul>
    </div>
    <div class="healthBear">
        <ul class="redTab" v-for="(item,index) in redTab" :key="item.value" @click="handleCoupon(index)" ref="lis">
            <li class="redTab-num">
                 {{item.name}}
            </li>
            <li class="tabText">{{item.text}}</li>
        </ul>
        <div class="car">
            <div class="bean">健康卡</div>
        </div>
    </div>
    <div class="yellowBox">
        <ul class="yellowTab" v-for="(item,index) in yellowTab" :key="item.value" @click="handleJump(index)">
            <li>
                 <van-icon :name="item.name" size="28px" color="#FFCA1A"/>
            </li>
            <li class="tabText">{{item.text}}</li>
        </ul>
    </div>
    <div class="quit">
            <span @click="handleUpdate">退出登录</span>
    </div>
</div>
</template>

<script>
import {mapState} from 'vuex'
import Footer from '../components/Footer.vue'
    export default {
        components: {
            Footer,
        },
        
       data() {
           return {
                greenTab:[
                   {value: 0 ,name:"pending-payment",text:"待付款"},
                   {value: 1 ,name:"todo-list-o",text:"待发货"},
                   {value: 2 ,name:"logistics",text:"待收货"},
                   {value: 3 ,name:"notes-o",text:"待评价"},
                   {value: 4 ,name:"orders-o",text:"我的订单"},
               ],
                redTab:[
                   {value: 0 ,name:"￥0.00",text:"余额"},
                   {value: 1 ,name:"0",text:"优惠劵"},
                   {value: 2 ,name:"0",text:"健康豆"},
               ],
                yellowTab:[
                   {value: 0 ,name:"column",text:"我的评论"},
                   {value: 1 ,name:"coupon",text:"我的券包"},
                   {value: 2 ,name:"cluster",text:"推广赚钱"},
                   {value: 3 ,name:"location",text:"地址管理"},
                   {value: 4 ,name:"setting",text:"用户设置"},
                   {value: 5 ,name:"question",text:"售后服务"},
                   {value: 6 ,name:"friends",text:"患者管理"},
                   {value: 7 ,name:"phone-circle",text:"联系客服"},
               ],
           }
       },
       computed: {
           ...mapState({
                couponList:state=>state.coupon.couponList,
                shoucang:state=>state.detail.shoucang,
                userInfo:state=>state.users.userInfo,
            }),

        },
        updated () {
            console.log(this.img);
        },
       methods: {
           handleOrder(idx){
               this.$router.push({path:"/myorder",query:{idx:idx}})
           },
            handleJump(idx) {
                if(idx==0){
                    this.$router.push("/discuss")
                }
                if(idx==1){
                    this.$router.push("/couponbag")
                }
                 if(idx==3){
                    this.$router.push("/addresslist")
                }
                if(idx==4){
                    this.$router.push("/userinfo")
                }
                if(idx==5){
                    this.$router.push("/shouhou")
                }
            },
            handleCoupon(idx){
                if(idx==0||idx==2){
                    this.$router.push({path:"/balance"})
                }
                if(idx==1){
                    this.$router.push("/couponlist")
                }
            },
            handleShou(){
                    this.$router.push('/shoucang')
                },
            handleStore(){
                this.$router.push('store')
            },
            handleUpdate(){
                localStorage.removeItem('userInfo')
                this.$router.push('/login')
            }
    },
    mounted () {
        this.$refs.lis[1].firstChild.innerHTML=this.couponList.length
    },
           
}
</script>

<style src="../assets/css/personal.css" scoped>
</style>
<style  lang="less" scoped>
.content{
    padding-bottom: 50px;
}
.greenTab{
    display: inline-block;
    width: 20%;
    >li{
        text-align: center;
    }
    >.tabText{
        font-size: 12px;
    }
}
.redTab{
    display: inline-block;
    width: 25%;
    >li{
        text-align: center;
    }
    >.tabText{
        font-size: 12px;
    }
    >.redTab-num{
        color: #F22E00;
    }
}
.yellowTab{
    display: inline-block;
    width: 25%;
    >li{
        text-align: center;
    }
    >.tabText{
        font-size: 12px;
    }
    
}
/* 退出登录 */
.quit{
  width: 100%;
  display: flex;
  align-items: center;
  margin-top:155px;
  margin-bottom:20px;
}
.quit span{
  margin: auto;
  display: inline-block;
  width: 300px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 22px;
  background: linear-gradient(to right,#FE5B33,#F11927);
  color: #fff;
  justify-content: center;
  font-size: 16px;
}
</style>
